<template>
  <div style="margin: 10px;">
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    设备状态统计
                </div>
                <div style="float: right;font-size: 16px;font-weight: bold;margin-right: 50px;">门禁设备&nbsp&nbsp472</div>
                <el-row>
                    <el-col :span="12">
                        <div class="echartsCss" ref="echartsbox1">
                            <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="echartsCss" ref="echartsbox2">
                            <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    通行人员类型
                </div>
                <div style="float: right;font-size: 16px;font-weight: bold;margin-right: 30px;">通行人员&nbsp&nbsp405</div>
                <div class="echartsCss" ref="echartsbox5">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    今日告警类别
                </div>
                <div style="float: right;font-size: 16px;font-weight: bold;margin-right: 50px;">告警总数&nbsp&nbsp38</div>
                <div class="echartsCss" ref="echartsbox3">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card style="height: 350px;margin-top: 10px;">
                <div class="title">
                    人员黑名单告警
                </div>
                <el-table
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="date"
                    label="告警类型"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="设备类型"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    align="center"
                    label="告警设备">
                    </el-table-column>
                    <el-table-column
                    prop="date"
                    align="center"
                    label="设备位置"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    align="center"
                    label="告警时间"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    align="center"
                    label="处理状态">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card style="height: 350px;margin-top: 10px;">
                <div class="title">
                    今日人员通行统计
                </div>
                <div class="echartsCss" ref="echartsbox4">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.zaixianEcharts()
    this.kaiguanEcharts()
    this.leibieEcharts()
    this.renyuanEcharts()
    this.renyuanleixingEcharts()
  },
  methods: {
    zaixianEcharts(){
        var echartsbox1=this.$refs.echartsbox1;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox1
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox1);
        }
        
        var option;
        option = {
            color:['#99ccff','#9999ff'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                bottom: '10%',
                formatter: function(name) {
                        // 获取legend显示内容
                        let data = option.series[0].data;
                        let total = 0;
                        let tarValue = 0;
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        let p = (tarValue / total * 100).toFixed(2);
                        return name  + ' '+'   ' + tarValue +'    '+ ' ';
                    },
                left: 'center'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '60%'],
                center:['50%','40%'],//调整饼图的位置
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 458, name: '在线' },
                    { value: 14, name: '离线' }
                ],
                }
            ]
        };
        option && myChart.setOption(option);
    },
    kaiguanEcharts(){
        var echartsbox2=this.$refs.echartsbox2;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox2
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox2);
        }
        
        var option;

        option = {
            color:['#6666ff','#66ffff'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                bottom: '20%',
                formatter: function(name) {
                        // 获取legend显示内容
                        let data = option.series[0].data;
                        let total = 0;
                        let tarValue = 0;
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        let p = (tarValue / total * 100).toFixed(2);
                        return name  + ' '+'   ' + tarValue +'    '+ ' ';
                    },
                left: 'center'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '60%'],
                center:['50%','30%'],//调整饼图的位置
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 308, name: '开' },
                    { value: 164, name: '关' }
                ],
                }
            ]
        };
        option && myChart.setOption(option);
    },
    renyuanleixingEcharts(){
        var echartsbox5=this.$refs.echartsbox5;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox5
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox5);
        }
        
        var option;

        option = {
            color:['#66ffff','#6600ff','#000000'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'center',
                data:['来访人员','内部员工'],
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','55%'],
                data: [
                    { value: 5, name: '来访人员' },
                    { value: 400, name: '内部员工' },
                ],
                label:{
                    formatter:function(data){
                    //显示数量、百分比
                    return `${data.name}\n (${data.value}人)`
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    leibieEcharts(){
        var echartsbox3=this.$refs.echartsbox3;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox3
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox3);
        }
        
        var option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '60%'],
                center:['60%','50%'],//调整饼图的位置
                data: [
                    { value: 33, name: '非法闯入告警' },
                    { value: 1, name: '非法刷卡告警' },
                    { value: 1, name: '防撬告警' },
                    { value: 1, name: '消防告警' },
                    { value: 1, name: '超时告警' },
                    { value: 1, name: '胁迫告警' }
                ],
                label:{
                    formatter:function(data){
                        //显示数量、百分比
                        return `${data.name} ${data.value}`
                    }
                    },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    renyuanEcharts(){
        var echartsbox4=this.$refs.echartsbox4;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox4
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox4);
        }
        
        var option;
        option = {
            title: {
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00','14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                // name: 'Search Engine',
                type: 'line',
                smooth: true,
                stack: 'Total',
                // label: {
                //   show: true,
                //   position: 'top'
                // },
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#ccffff'
                    },
                    {
                        offset: 0.5,
                        color: '#ccffff'
                    },
                    {
                        offset: 1,
                        color: '#ffffff'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0,0,0,0,0,0,0, 10, 12, 20,14,0,0,18,25,17,36,0,0,0,0,0,0, 0]
                }
            ]
        };
        option && myChart.setOption(option);
    }
  },
}
</script>
<style lang="scss" scoped>
.title{
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
}
.echartsCss{
    width: 100%;
    height: 280px;
}
</style>
